<!DOCTYPE html>
<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">

    <title>优惠列表</title>
    <meta name="keywords" content="创建活动">
    <meta name="description" content="创建活动">
<#include "/commons/stylesheets.ftl">

    <link href="/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
    <link href="/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="/css/plugins/switchery/switchery.css" rel="stylesheet">

    <link href="/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/layer/skin/layer.css" rel="stylesheet">
    
    <style type="text/css">
        #toolbar button {
            margin-right: 10px;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                   
                </div>
                <div class="ibox-content">
                	<form id="searchForm" class="form-inline" >
                        
                                <div class="form-group">
                                    <label class="control-label">优惠名称</label>
									<input type="text" placeholder="优惠名称" name="couponName" class="form-control">
                                </div>  
                                
                                <div class="form-group">
                                    <label class="control-label">优惠编号</label>
									<input type="text" placeholder="优惠编号" name="couponNum" class="form-control">
                                </div>
                                
                                <div class="form-group">
                                    <label class="control-label">状态</label>
									 <select data-placeholder="请选择状态..." name="couponStatus"
                                                class="chosen-select form-control">
                                            <option value="">请选择</option>
                                            <#list couponStatu as stat >
                                            	<option value="${stat.status}" hassubinfo="true">${stat.view}</option>
                                            </#list>
                                        </select>
                                </div>
                                               
                                <div class="form-group">
                                    
                                    <label class="control-label">使用时间</label>
                                    <input placeholder="开始日期" class="form-control layer-date" id="start" name="usedBegin">
                                    <input placeholder="结束日期" class="form-control layer-date" id = "end" name="usedEnd">
                                    
                                </div>
                               	<button class="btn btn-primary" type="button" style="margin-left: 20px;" onclick="search()">搜索</button>
                        		<button class="btn btn-primary" type="button" style="margin-left: 20px;" onclick="openDialog('/coupon/add','新建优惠',760,660)">新建</button>
                        
                    </form>
                    
                     <table id="table"
                                data-striped="true"
	                            data-icons-prefix="fa"
	                            data-toolbar="#toolbar"
	                            data-data-field="list"
	                            data-search="false"
	                            data-show-refresh="false"
	                            data-show-columns="false"
	                            data-show-export="false"
	                            data-side-pagination="server"
	                            data-pagination="true"
	                            data-page-size="15"
	                            data-page-list="[10,15,20,30]"
                               data-url="${rc.contextPath}/coupon/search"
                               >
                            <thead>
                                <tr>
                                    <th data-field="id">id</th>
		                            <th data-field="couponName">优惠名称</th>
		                            <th data-field="couponNum">优惠号码</th>
		                            <th data-field="couponTypeView">类型</th>
		                            <th data-field="activeTime" data-formatter="formatDate">激活时间</th>
		                            <th data-field="validBegin" data-formatter="formatDate">有效期起</th>
		                            <th data-field="validEnd" data-formatter="formatDate">有效期止</th>
		                            <th data-field="statusView">状态</th>
		                            <th data-field="couponStatus" data-formatter="formatOperation">操作</th>
                                </tr>
                            </thead>

                        </table>

                </div>
            </div>
        </div>
    </div>
</div>

<!-- 全局js -->
<#include "/commons/scripts.ftl">
<script src="/layer/layer.js"></script>
<script src="/js/app.js"></script>
<script src="/js/plugins/layer/laydate/laydate.js"></script>
<!-- Data Tables -->
<script type="text/javascript" src="/bootstrap-table/bootstrap-table.min.js"></script>
<script type="text/javascript" src="/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>


 <script>
        $(function(){$("#table").bootstrapTable({locale:'zh-CN'})});
       
          var Operation = {"1":"<div class=\"btn-group\"><button data-toggle=\"dropdown\" class=\"btn btn-primary btn-xs dropdown-toggle\">操作 <span class=\"caret\"></span></button><ul class=\"dropdown-menu\"><li><a href=\"/bindcoupon/bind?id=couponId\">绑定用户</a></li>	<li><a href=\"/bindcoupon/delete?id=couponId\">删除</a></li><li><a href=\"/bindcoupon/detail?id=couponId\">详情</a></li><li><a href=\"/coupon/forbid?id=couponId\" class=\"font-bold\">禁用</a></li><li><a href=\"/bindcoupon/usedInfo?id=couponId\">使用查看</a></li></ul></div>",
                            "2":"<div class=\"btn-group\"><button data-toggle=\"dropdown\" class=\"btn btn-primary btn-xs dropdown-toggle\">操作<span class=\"caret\"></span></button><ul class=\"dropdown-menu\"><li><a href=\"/bindcoupon/detail?id=couponId\">查看绑定</a><li><a href=\"/bindcoupon/detail?id=couponId\">详情</a></li><li><a href=\"/coupon/forbid?id=couponId\" class=\"font-bold\">禁用</a></li><li><a href=\"/bindcoupon/usedInfo?id=couponId\">使用查看</a></li></ul></div>",
                            "3":"<div class=\"btn-group\"><button data-toggle=\"dropdown\" class=\"btn btn-primary btn-xs dropdown-toggle\">操作<span class=\"caret\"></span></button><ul class=\"dropdown-menu\"><li><a href=\"/bindcoupon/detail?id=couponId\">详情</a></li><li><a href=\"/coupon/forbid?id=couponId\" class=\"font-bold\">禁用</a></li><li><a href=\"/bindcoupon/usedInfo?id=couponId\">使用查看</a></li></ul></div>",
                            "4":"<div class=\"btn-group\"><button data-toggle=\"dropdown\" class=\"btn btn-primary btn-xs dropdown-toggle\">操作<span class=\"caret\"></span></button><ul class=\"dropdown-menu\"><li><a href=\"/bindcoupon/detail?id=couponId\">详情</a></li><li><a href=\"/coupon/forbid?id=couponId\" class=\"font-bold\">禁用</a></li><li><a href=\"/bindcoupon/usedInfo?id=couponId\">使用查看</a></li></ul></div>"
                            };
                            
        Date.prototype.format = function(format) {
               var date = {
                      "M+": this.getMonth() + 1,
                      "d+": this.getDate(),
                      "h+": this.getHours(),
                      "m+": this.getMinutes(),
                      "s+": this.getSeconds(),
                      "q+": Math.floor((this.getMonth() + 3) / 3),
                      "S+": this.getMilliseconds()
               };
               if (/(y+)/i.test(format)) {
                      format = format.replace(RegExp.$1, (this.getFullYear() + '').substr(4 - RegExp.$1.length));
               }
               for (var k in date) {
                      if (new RegExp("(" + k + ")").test(format)) {
                             format = format.replace(RegExp.$1, RegExp.$1.length == 1
                                    ? date[k] : ("00" + date[k]).substr(("" + date[k]).length));
                      }
               }
               return format;
        }               

        function formatOperation(value,row,index){
            var operationUrl = Operation[value];
            operationUrl = operationUrl.replace(/couponId/g, row.uuid.id);
            return operationUrl ;
        }
        
		function formatDate(value,row,index){
			if( value == null || value == '' ){
				return;
			}
				
            var newDate = new Date();
            newDate.setTime(value);
            return newDate.format('yyyy-MM-dd');
        }

        
        function search(){
            $("#table").bootstrapTable("refresh",{url:"${rc.contextPath}/coupon/search?"+$("#searchForm").serialize()});
        }

</script>

<script type="application/javascript">

   
    
    $(document).ready(function () {
        
        var start = {
            elem: "#start",
            format: "YYYY-MM-DD",
            min: laydate.now(),
            max: "2099-06-16",
            istime: true,
            istoday: false,
            choose: function (a) {
                end.min = a;
                end.start = a
            }
        };
        var end = {
            elem: "#end",
            format: "YYYY-MM-DD",
            min: laydate.now(),
            max: "2099-06-16",
            istime: true,
            istoday: false,
            choose: function (a) {
                start.max = a
            }
        };
        laydate(start);
        laydate(end);
        /** lay date end */

    });
    
</script>

</body>

</html>